<template>
	<uni-section title="内容输入" type="line">
		<view class="example">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms
				ref="form"
				label-position="top"
				:rules="postRules"
				:modelValue="formData"
			>
				<uni-forms-item label="标题" name="title" required>
					<uni-easyinput v-model="formData.title" placeholder="请输入标题" />
				</uni-forms-item>
				<uni-forms-item label="内容" name="description" required>
					<piaoyiEditor
						:maxlength="3000"
						@changes="saveContens"
						:readOnly="false"
						:api="`${BASE_URL}/file/post/picture`"
						name="post-picture"
					/>
				</uni-forms-item>
				<uni-forms-item label="活动时间" name="dateTime" required>
					<uni-datetime-picker
						v-model="formData.dateTime"
						type="datetimerange"
						rangeSeparator="至"
					/>
				</uni-forms-item>
				<uni-forms-item  label="举办的社团" label-width="500rpx" name="club_id" required>
					<uni-data-select
						v-model="formData.club_id"
						:localdata="leaderClubs"
					></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="参与人数" name="registration_limit" required>
					<uni-easyinput v-model="formData.registration_limit" placeholder="请输入人数" type="number"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="封面" name="background_image_url" required>
					<uni-file-picker
						@select="imageSelect"
						:auto-upload="false"
						limit="1"
						title="最多选择1张图片"
						@delete="imageDelete"
					></uni-file-picker>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view>
			<button type="primary" @click="publish">发布</button>
		</view>
	</uni-section>
	<!-- 删除 -->
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog
			type="error"
			cancelText="取消"
			confirmText="确定"
			title="提示"
			content="确定发送这个活动吗"
			@confirm="dialogConfirm"
		></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue'
import { storeToRefs } from 'pinia'
import { computed, onMounted, reactive, ref } from 'vue'

import useLoginStore from '@/store/login.js'
import useEventStore from '@/store/event.js'
import useClubStore from '@/store/club.js'
import { BASE_URL } from '@/service/config.js'

const loginStore = useLoginStore()
const eventStore = useEventStore()
const clubStore = useClubStore()
onMounted(() => {
	clubStore.getJoinedClubByUserIdAction(loginStore.userInfo.user_id)
})
const { joinedClubs } = storeToRefs(clubStore) 

const leaderClubs = computed(() => {
	return joinedClubs.value.filter((item) => item.role === 'leader').map(item => ({text: item.name, value: item.id}))
})

console.log(leaderClubs)
const formData = reactive({
	title: '',
	description: '',
	dateTime: [],
	start_date:'',
	end_date:'',
	background_image_url: '',
	club_id: '',
	registration_limit:''
})
const form = ref('')
const postRules = {
	title: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入标题信息~'
			}
		]
	},
	// 对email字段进行必填验证
	description: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入内容~'
			}
		]
	},
	dateTime: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入活动时间~'
			}
		]
	},
	background_image_url: {
		rules: [
			{
				required: true,
				errorMessage: '必须上传封面~'
			}
		]
	},
	club_id: {
		rules: [
			{
				required: true,
				errorMessage: '必须上传封面~'
			}
		]
	},
	registration_limit: {
		rules: [
			{
				required: true,
				errorMessage: '必须填写参加人数~'
			},
			{
				pattern: /^\d+$/,
				errorMessage: '必须为数字'
			}
		]
	}
}

function saveContens(e) {
	formData.description = e.html
}
function imageSelect(e) {
	const tempFilePaths = e.tempFilePaths //e是获取的图片源
	uni.uploadFile({
		url: `${BASE_URL}/file/event/picture`, //上传图片的后端接口
		header: {
			Authorization: loginStore.token
		},
		filePath: tempFilePaths[0],
		name: 'event-picture',
		success: (res) => {
			const obj = JSON.parse(res.data)
			formData.background_image_url = obj.data.url
		}
	})
}
function imageDelete() {
		formData.background_image_url = ''
}

// 发送评论
const alertDialog = ref('')

async function dialogConfirm() {
	eventStore.publishEventAction(formData)
	uni.showToast({
		title: '发布成功',
		icon: 'success'
	})
	uni.switchTab({
		url: '/pages/profile/profile'
	})
}

function publish() {
	formData.start_date = formData.dateTime[0]
	formData.end_date = formData.dateTime[1]
	form.value
		.validate()
		.then(async (res) => {
			try {
				alertDialog.value.open()
			} catch (err) {
				uni.showToast({
					title: err.message,
					icon: 'error'
				})
			}
		})
		.catch((err) => {
			uni.showToast({
				title: '请输入信息',
				icon: 'error'
			})
		})
}
</script>

<style>
.example {
	padding: 15px;
	background-color: #fff;
}

.segmented-control {
	margin-bottom: 15px;
}

.button-group {
	margin-top: 15px;
	display: flex;
	justify-content: space-around;
}

.form-item {
	display: flex;
	align-items: center;
}

.button {
	display: flex;
	align-items: center;
	height: 35px;
	margin-left: 10px;
}
</style>
